<template>
  <!-- 一次接线图弹窗-左下tab切换内容 -->
  <div class="content">
    <div class="content-tabs">
      <!-- 头部信息 -->
      <div
        class="content-tabs-item centerbox"
        @click="clickEvent(item)"
        v-for="(item,index) in tabsDataList"
        :class="{'content-tabs-active':item.id===currentItem.id}"
        :key="index"
      >{{item.name}}</div>
    </div>
    <div class="content-box">
      <div class="item" v-show="currentItem.id=='bwxx'">
        <div class="neirong">
          <div class="neirong-line">
            <div class="neirong-line-item" v-for="(item , index) in currentBwxx" :key="index">
              <div class="text" :title="item.myName">{{item.myName}}</div>
              <div class="status zctext">{{item.myState}}</div>
              <div class="statuscolor" :class="item.myStyle"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="item zxjcitem" v-show="currentItem.id=='zxjc'">
        <div class="neirong">
          <div class="neirong-line">
            <!-- <div class="neirong-line-item">
              <div class="text">#1油色谱介质</div>
              <div class="status zctext">正常</div>
              <div class="statuscolor zc"></div>
            </div>
            <div class="neirong-line-item">
              <div class="text">#1铁芯接地电流</div>
              <div class="status yctext">异常</div>
              <div class="statuscolor yc"></div>
            </div>
            <div class="neirong-line-item">
              <div class="text">110kV母联分断路器(无机械特性)</div>
              <div class="status wsjtext">无数据</div>
              <div class="statuscolor wsj"></div>
            </div>
            <div class="neirong-line-item">
              <div class="text">110kV母联分断路器(无机械特性)</div>
              <div class="status zctext">正常</div>
              <div class="statuscolor zc"></div>
            </div>-->
            <!-- tab栏切换 -->
            <div
              v-for="(item,index) in zxjcList"
              :key="index"
              class="neirong-line-item"
              @click="selectDeviceType(item)"
            >
              <div class="text">{{item.deviceTypeName}}</div>
              <div class="status" :class="item.isGj=='告警'?'yctext':'zctext'">{{item.isGj}}</div>
              <div class="statuscolor" :class="item.isGj=='告警'?'yc':'zc'"></div>
            </div>
          </div>
          <div class="neirong-table mediumtablestyle">
            <el-table
              :data="tableDatazxjc"
              :row-class-name="tableRowClassName"
              style="width: 100%"
              border
              height="100%"
            >
              <el-table-column prop="name" label="名称" :show-overflow-tooltip="true" width="260"></el-table-column>
              <el-table-column prop="value" :show-overflow-tooltip="true" label="实时数据">
                <template slot-scope="scope">
                  <div>{{ scope.row.myValue }}</div>
                  <!-- <div v-else-if=" scope.row.value"></div> -->
                </template>
              </el-table-column>
              <!-- <el-table-column prop="Monitoring" :show-overflow-tooltip="true" label="阈值"></el-table-column> -->
              <el-table-column prop="time" :show-overflow-tooltip="true" width="180" label="数据时间"></el-table-column>
              <el-table-column prop="state" :show-overflow-tooltip="true" width="120" label="状态">
                <template slot-scope="scope">
                  <div
                    :class="[scope.row.status=='0' ?'orange0':'',scope.row.status=='1' ?'orange1':'', scope.row.status=='2' ?'orange2':'',scope.row.status=='3' ?'orange3':'',scope.row.status=='4' ?'orange4':'',scope.row.status=='5' ?'orange5':'' ]"
                  >{{ scope.row.status |zxjcBataleState }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 辅控信息的原始信息 -->
      <!-- <div class="item" v-show="currentItem.id=='fkxx'">
        <div class="neirong">
          <div class="neirong-tabletwo mediumtablestyle">
            <el-table
              :data="tableData"
              :row-class-name="tableRowClassName"
              style="width: 100%"
              border
              height="100%"
            >
              <el-table-column prop="name" label="名称" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="realTime" :show-overflow-tooltip="true" label="实时数据"></el-table-column>
              <el-table-column prop="Monitoring" :show-overflow-tooltip="true" label="阈值"></el-table-column>
              <el-table-column prop="time" :show-overflow-tooltip="true" width="180" label="数据时间"></el-table-column>
              <el-table-column prop="state" :show-overflow-tooltip="true" width="120" label="状态"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>-->
      <!-- 辅控信息 -->
      <!-- 上面的tab切换 -->
      <div class="item" v-show="currentItem.id=='fkxx'">
        <div class="neirong">
          <div class="neirong-line">
            <div
              v-for="(item,index) in newFksbData"
              :key="index"
              class="neirong-line-item"
              @click="currentFzjkBtn=item"
            >
              <div class="text">{{item.deviceTypeNames}}</div>
              <div
                class="status"
                :class="item.stateValue=='gj'?'yctext':'zctext'"
              >{{item.stateName}}</div>
              <div class="statuscolor" :class="item.stateValue=='gj'?'yc':'zc'"></div>
            </div>
          </div>
          <!-- tab表格 -->
          <div class="neirong-table mediumtablestyle">
            <el-table style="width: 100%" :data="fzjkTableData" height="100%" border>
              <el-table-column prop="deviceName" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="name" label="采集名称" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="采集值" width="100" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div :class="scope.row.myStyle">{{scope.row.myValue}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="time" label="采集时间" width="160" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div
                    v-if="scope.row.time"
                  >{{scope.row.time.substring(0,10)}} {{scope.row.time.substring(11,19)}}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
let ycjxt = require("../../../../../assets/data/ycjxt.json");
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import { GetSocketModule } from "@/store/modules/GetSocketData";
//loadsh
import lodash from "lodash";
interface dataList {
  name: string;
  value: string;
  itemStyle: object;
}
let colorList: Array<string> = ["#CA3834", "#CD7A26", "#115AD6"];
@Component
export default class DefectsPie extends Vue {
  @Prop()
  dialogData;
  // 此房间所有台账信息
  @Prop()
  pointListByArea;
  //表格数据
  public tableData: Array<any> = [
    {
      interval: "#1主变",
      name: "#1主变氢气",
      realTime: "17.5u/1",
      Monitoring: "氢气",
      time: "2020/08/30 17:50",
      state: "正常",
      Historical: "",
    },
    {
      interval: "#1主变",
      name: "#1主变氢气",
      realTime: "17.5u/1",
      Monitoring: "氢气",
      time: "2020/08/30 17:50",
      state: "正常",
      Historical: "1",
    },
    {
      interval: "#1主变",
      name: "#1主变氢气",
      realTime: "17.5u/1",
      Monitoring: "氢气",
      time: "2020/08/30 17:50",
      state: "正常",
      Historical: "",
    },
    {
      interval: "#1主变",
      name: "#1主变氢气",
      realTime: "17.5u/1",
      Monitoring: "氢气",
      time: "2020/08/30 17:50",
      state: "正常",
      Historical: "1",
    },
  ];
  currentItem = {
    id: "bwxx",
    name: "变位信息",
  };
  // tabs数据集合1
  tabsDataList = [
    {
      id: "bwxx",
      name: "变位信息",
    },
    {
      id: "zxjc",
      name: "在线监测",
    },
    {
      id: "fkxx",
      name: "辅控信息",
    },
  ];
  get currentBwxx() {
    let jgid: any = this.dialogData.jgid;
    let ycjxtByCurStation = ycjxt[jgid] || [];
    let AllAuxiliaryByPointId = GetSocketModule.getterAllAuxiliaryByPointId;
    let data = ycjxtByCurStation.map((v) => {
      let point = AllAuxiliaryByPointId[v.dwid] || {};
      v.myName = point.name;
      v.myState = "无数据";
      v.myStyle = "wsj";
      if (point.isErr === "success") {
        v.myState = "正常";
        v.myStyle = "zc";
      }
      if (point.isErr === "err") {
        v.myState = "异常";
        v.myStyle = "yc";
      }
      return Object.assign({}, point, v);
    });
    return data;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }) {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //点击事件
  clickEvent(item) {
    this.currentItem = item;
  }

  // 天平站-当前间隔-在线监测-装置类型数据 目前只有天平站有一次接线图
  get zxjcList() {
    let ddzid: any = this.$route.query.stationId;
    // 天平站的
    let xtInfo = GetSocketModule.getterAllAuxiliaryByStationId[ddzid] || [];
    // 在线监测的
    let zxjc03 = [];
    if (xtInfo.length > 0) {
      xtInfo.map((k) => {
        if (k.xtValue === "03" && k.deviceId) {
          zxjc03.push(k);
        }
      });
    }
    // 当前间隔的
    let currentBay = [];
    let jgid = this.dialogData.jgid || "";
    if (zxjc03.length > 0 && jgid) {
      zxjc03.map((m) => {
        if (m.bayId == jgid && m.isErr) {
          currentBay.push(m);
        }
      });
    }
    // console.log("currentBay:", currentBay);

    let deviceobj = {};
    currentBay.map((v) => {
      deviceobj[v.deviceType] = deviceobj[v.deviceType] || [];
      deviceobj[v.deviceType].push(v);
    });
    // console.log("deviceobj:", deviceobj);
    this.deviceobj = deviceobj;
    let deviceList = [];
    for (let key in deviceobj) {
      let isErr = "正常";
      deviceobj[key].map((k) => {
        if (k.isErr && k.isErr === "err") {
          isErr = "异常";
        }
      });
      let isGj = "正常";
      deviceobj[key].map((k) => {
        if (k.isGj && k.isGj === "gj") {
          isGj = "告警";
        }
      });
      let data = {
        deviceType: deviceobj[key][0].deviceType,
        deviceTypeName: deviceobj[key][0].deviceTypeName,
        isErr: isErr,
        isGj: isGj,
      };
      if (isGj === "正常") {
        deviceList.push(data);
      } else {
        deviceList.unshift(data);
      }
    }
    return deviceList;
  }
  get Fkxx() {
    // 本房间所有台账信息
    let pointListByArea = this.pointListByArea;
    var obj = {
      "01": [],
      "04": [],
      "05": [],
      "02": [],
    };
    pointListByArea.forEach((item) => {
      let xtValue = item.xtValue;
      obj[xtValue] = obj[xtValue] || [];
      obj[xtValue].push(item);
    });
    return obj;
  }
  currentFzjkBtn = {
    deviceTypeNames: "消防",
    id: "01",
    stateName: "正常",
    stateValue: "fgj",
  };
  get fzjkTableData() {
    let Fkxx = this.Fkxx;
    let currentFzjkBtn = this.currentFzjkBtn;
    let tableData = Fkxx[currentFzjkBtn.id] || [];
    let data = [];
    let styleObj = {
      "0": "orange0",
      "1": "orange1",
      "2": "orange2",
      "3": "orange3",
      "4": "orange4",
      "5": "orange5",
      default: "",
    };
    tableData.map((v) => {
      v.myStyle = styleObj[v.status] || styleObj["default"];
      if (v.remoteType === "1") {
        v.myValue = (v.value || "-") + (v.unit || "");
        data.push(v);
      }
      if (v.remoteType === "2") {
        let myValue = "-";
        let value = v.value;
        let pointerDict = v.pointerDict;
        pointerDict.forEach((obj) => {
          if (obj.code === value) {
            myValue = obj.name;
          }
        });
        v.myValue = myValue;
        data.push(v);
      }
    });
    data = data.sort((a, b) => a.status - b.status);
    return data;
  }
  deviceobj = {};
  // 选择的装置类型 初始值还要加
  activeName = "";
  // 表格数据 字段还要对
  tableDatazxjc = [];
  // 装置类型点击事件
  selectDeviceType(item) {
    let tableDatazxjc = this.deviceobj[item.deviceType];
    tableDatazxjc.forEach((item) => {
      if (item.remoteType === "1") {
        item.myValue = (item.value || "-") + (item.unit || "");
      }
      if (item.remoteType === "2") {
        if (item.pointerDict && item.pointerDict.length) {
          item.pointerDict.forEach((v) => {
            if (v.code === item.value) {
              item.myValue = v.name;
            }
          });
        } else {
          item.myValue = item.value;
        }
      }
    });
    // pointerDict
    tableDatazxjc = tableDatazxjc.sort((a, b) => a.status - b.status);
    this.tableDatazxjc = tableDatazxjc;
  }

  // 变位信息-压板状态 根据转好的压板点位数组 去台账匹 只展示异常的测点
  get ybztList() {
    let list = [];
    return list;
  }
  // 监测信息数据
  fksbData = [
    {
      deviceTypeNames: "消防系统",
      id: "01",
      stateName: "正常",
      stateValue: "fgj",
    },
    {
      deviceTypeNames: "安全防范",
      id: "02",
      stateName: "正常",
      stateValue: "fgj",
    },
    {
      deviceTypeNames: "环境监控",
      id: "04",
      stateName: "正常",
      stateValue: "fgj",
    },
    {
      deviceTypeNames: "照明控制",
      id: "05",
      stateName: "正常",
      stateValue: "fgj",
    },
  ];

  get newFksbData() {
    let fksbData = lodash.cloneDeep(this.fksbData);
    let Fkxx = this.Fkxx;
    let isGjObj = {};
    for (let xtValue in Fkxx) {
      isGjObj[xtValue] = "fgj";
      let list = Fkxx[xtValue];
      list.forEach((v) => {
        if (v.isGj === "gj") {
          isGjObj[v.xtValue] = "gj";
        }
      });
    }
    fksbData.forEach((v) => {
      let data = isGjObj[v.id];
      if (data === "gj") {
        v.stateValue = "gj";
        v.stateName = "告警";
      } else {
        v.stateValue = "fgj";
        v.stateName = "正常";
      }
    });
    console.log(isGjObj);
    return fksbData;
  }
  mounted() {
    this.selectDeviceType(this.zxjcList[0]);
    // this.Fkxx();
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  &-tabs {
    width: 50%;
    height: 10%;
    display: flex;
    border: 1px solid rgba(5, 180, 255, 1);
    &-item {
      width: 50%;
      height: 100%;
      border-right: 1px rgba(5, 180, 255, 1) solid;
      // border-bottom: 1px #0276c0 solid;
      box-sizing: border-box;
      cursor: pointer;
      color: #97989c;
      transition: all 800ms;
    }
    &-item:last-child {
      border-right: none;
    }
    &-active {
      color: #fff;
      background-image: url("../../../../../assets/img/WarningToSolve/warning_duty_bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  &-box {
    width: 100%;
    height: 90%;
    // background-color: plum;
    display: flex;
    flex-direction: column;
    .item {
      width: 100%;
      height: 100%;
      .explain {
        width: 100%;
        height: 10%;
        display: flex;
        padding-left: 78%;
        // background-color: powderblue;
        .li {
          // width: 8%;
          height: 90%;
          display: flex;
          align-items: center;
          padding-right: 0.08rem;
          // background-color: pink;
          .green {
            width: 0.18rem;
            height: 0.05rem;
            background: #00ff00;
          }
          .red {
            width: 0.18rem;
            height: 0.05rem;
            background: #ff0000;
          }
          .gray {
            width: 0.18rem;
            height: 0.05rem;
            background: #bfbfbf;
          }
          .text {
            margin-left: 0.04rem;
          }
        }
      }
      .neirong {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0.1rem;
        box-sizing: border-box;
        overflow: auto;
        // background-color: pink;
        &-title {
          width: 100%;
          height: 15%;
          display: flex;
          // background-color: gray;
          align-items: center;
          &-item {
            width: 50%;
            text-align: center;
            font-size: 0.18rem;
          }
        }
        &-line {
          width: 100%;
          height: 25%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          // background-color: greenyellow;
          &-item {
            padding: 0.1rem 0 0;
            margin: 0.06rem 1% 0rem;
            width: 23%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;
            background-color: rgba(16, 44, 92, 0.6);
            .text {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .statuscolor {
              width: 100%;
              height: 10%;
            }
          }
        }
        &-table {
          padding: 0.24rem 0.24rem;
          width: 100%;
          height: 55%;
          // background-color: pink;
        }
        &-tabletwo {
          padding: 0.24rem 0.24rem;
          width: 100%;
          height: 100%;
          // background-color: rgb(177, 178, 177);
        }
        .zc {
          background-color: rgb(69, 255, 4);
        }
        .yc {
          background-color: rgb(145, 0, 2);
        }
        .wsj {
          background-color: rgb(177, 178, 177);
        }
        .zctext {
          color: rgb(69, 255, 4);
        }
        .yctext {
          color: rgb(145, 0, 2);
        }
        .wsjtext {
          color: rgb(177, 178, 177);
        }
      }
    }
  }
  // background-color: pink;
  .zxjcitem {
    .neirong-line {
      cursor: pointer;
    }
    .neirong-table {
      height: 80%;
      padding: 0.1rem 0.24rem;
    }
  }
}
.content-box .item .neirong-table {
  height: 80%;
}
</style>